<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>人力资源管理系统 - 系统设置</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#2563eb',
            secondary: '#64748b',
            success: '#10b981',
            warning: '#f59e0b',
            danger: '#ef4444',
            dark: '#1e293b',
            light: '#f8fafc'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 引入公共CSS -->
  <link rel="stylesheet" href="css/common.css">

  <!-- 引入API和公共JS -->
  <script src="js/api.js"></script>
  <script src="js/common.js"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
  <div id="app" class="flex h-screen overflow-hidden"></div>

  <script>
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      if (checkAuthentication() && checkRolePermission(['admin'])) {
        initSystemSettingsPage();
        // 注意：initSystemConfigEvents()将在loadSystemSettingsPage()中调用
      } else {
        showToast('您没有权限访问此页面', 'error');
        setTimeout(() => {
          window.location.href = 'index.html';
        }, 1500);
      }
    });

    // 初始化页面
    function initSystemSettingsPage() {
      // 加载侧边栏和用户信息
      initSidebar();
      initUserInfo();
      initLogout();

      // 加载系统设置页面
      loadSystemSettingsPage();
    }

    // 加载系统设置页面
    function loadSystemSettingsPage() {
      showLoading();
      // 使用真实API调用替代模拟数据
      api.getSystemConfig()
        .then(configData => {
          const userInfo = localStorage.getItem('userInfo');
          if (userInfo) {
            const user = JSON.parse(userInfo);
            document.getElementById('app').innerHTML = `
              <!-- 侧边栏 -->
              <aside id="sidebar" class="w-64 bg-white border-r border-gray-200 flex-shrink-0 hidden md:block transition-all duration-300">
                <!-- 侧边栏内容 -->
              </aside>

              <!-- 主内容区 -->
              <!-- 主内容区HTML -->
            `;
            // 重新初始化侧边栏
            initRoleBasedSidebar(user.role);
            // 填充配置表单数据
            populateConfigForm(configData);
            // 初始化系统配置事件
            initSystemConfigEvents();
          }
          hideLoading();
        })
        .catch(error => {
          hideLoading();
          showToast('加载系统配置失败: ' + (error.message || '未知错误'), 'error');
        });
    }

    // 显示指定部分
    function showSection(sectionId) {
      // 隐藏所有部分
      document.getElementById('userManagement').classList.add('hidden');
      document.getElementById('departmentManagement').classList.add('hidden');
      document.getElementById('systemConfig').classList.add('hidden');

      // 显示选中部分
      document.getElementById(sectionId).classList.remove('hidden');
    }

    // 初始化系统配置事件
    function initSystemConfigEvents() {
      // 保存配置按钮点击事件
      const saveBtn = document.getElementById('saveConfigBtn');
      if (saveBtn) {
        saveBtn.addEventListener('click', function() {
          // 显示加载状态
          showLoading('正在保存配置...');

          // 收集表单数据
          const configData = {
            companyName: document.getElementById('companyName').value,
            companyAddress: document.getElementById('companyAddress').value,
            companyPhone: document.getElementById('companyPhone').value,
            companyEmail: document.getElementById('companyEmail').value,
            annualLeaveDays: parseInt(document.getElementById('annualLeaveDays').value),
            sickLeaveDays: parseInt(document.getElementById('sickLeaveDays').value),
            passwordExpireDays: parseInt(document.getElementById('passwordExpireDays').value),
            loginFailedAttempts: parseInt(document.getElementById('loginFailedAttempts').value)
          };

          // 调用API保存配置
          api.saveSystemConfig(configData)
            .then(response => {
              hideLoading();
              if (response.success) {
                showToast('配置保存成功', 'success');
              } else {
                showToast('配置保存失败: ' + response.message, 'error');
              }
            })
            .catch(error => {
              hideLoading();
              showToast('保存配置时发生错误: ' + error.message, 'error');
            });
        });
      }
    }
  </script>
  <script>
    // 显示加载状态
    function showLoading() {
      let loading = document.getElementById('loading');
      if (!loading) {
        loading = document.createElement('div');
        loading.id = 'loading';
        loading.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
        loading.innerHTML = '<div class="bg-white p-5 rounded-lg shadow-lg"><i class="fa fa-spinner fa-spin mr-2"></i> 加载中...</div>';
        document.body.appendChild(loading);
      }
      loading.style.display = 'flex';
    }

    // 隐藏加载状态
    function hideLoading() {
      const loading = document.getElementById('loading');
      if (loading) {
        loading.style.display = 'none';
      }
    }
    // 添加填充配置表单的函数
    function populateConfigForm(configData) {
      document.getElementById('companyName').value = configData.companyName || '';
      document.getElementById('companyAddress').value = configData.companyAddress || '';
      document.getElementById('companyPhone').value = configData.companyPhone || '';
      document.getElementById('companyEmail').value = configData.companyEmail || '';
      document.getElementById('annualLeaveDays').value = configData.annualLeaveDays || 15;
      document.getElementById('sickLeaveDays').value = configData.sickLeaveDays || 10;
      document.getElementById('passwordExpireDays').value = configData.passwordExpireDays || 90;
      document.getElementById('loginFailedAttempts').value = configData.loginFailedAttempts || 5;
    }
    </script>
</body>
</html>